<!DOCTYPE html>
<!--使用thymeleaf需要在这里引入命名空间-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->

<!--Thymeleaf是一个流行的模板引擎，该模板引擎是由java语言开发。SpringBoot官方推荐使用Thymeleaf来代替jsp
相对来说，jsp需要先编译成Servlet,再运行。效率会低一点。
而Thymeleaf是以HTML页面为载体的，引入命名空间后就可以在HTML页面标签中使用Thymeleaf指令
Thymeleaf指令都是以th:开始的，属性和HTML页面元素的属性一样
-->


<head>
    <meta charset="UTF-8">
    <title>我是一个标题</title>
    <!-- 引入vue框架和axios -->
    <script src="js/vue3.min.js" > </script>
    <script src="js/axios.min.js"> </script>
</head>
<body>
<div id="app">
    <h3 >我是一个网页啊</h3>
    <hr  style="border-color: red"/>
    <img src="img/xx.jpg" height="500" /> <br>
    <input type="button" value="点我查询" @click="query" />
<!--    <button @click="query">点我查询</button>-->
    <p  v-for="(item,index) in list" >empno:{{item.empno}},ename:{{item.ename}},job:{{item.job}},
      mgr:{{item.mgr}},hiredate:{{item.hiredate}},sal:{{item.sal}},comm:{{item.comm}},deptno:{{item.deptno}}
    </p>

</div>
<script type="text/javascript">
    const app = Vue.createApp({
        data() {
            return {
                list:[],
            }
        },
        methods: {
            query(){
                axios({
                    method:'get',
                    url:'http://localhost:8080/querys'
                }).then(result => this.list = result.data)

                    .catch(function(error){
                    console.log(error)
                })
            }
        },
    }).mount("#app")
</script>
</body>
</html>